<template>
    <div class="table-box">
        <el-table :data="listArr" border ref="table" style="width: 100%">
            <el-table-column v-for="(item, index) in fields" :key="index" :prop="item.key" :label="item.label" align="center" :width="item.width">
                <template slot-scope="data">
                    <span v-if="item.key === 'number'">{{ data.$index + 1 }}</span>
                    <span v-else-if="item.key === 'time'">{{ moment(data.row[item.key]).format("YYYY-MM-DD hh:mm:ss") }}</span>
                    <div v-else-if="item.isOther">
                        <slot :name="item.key" :data="data.row"></slot>
                    </div>
                    <span v-else :class="item.isClick ? 'click-item' : ''" @click="itemClick(data.row, item)">{{ data.row[item.key] }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div v-show="pageTotal > 10" flex="main:right" class="pagination">
            <el-pagination
                background
                :current-page.sync="pageData.pageNumber"
                @current-change="pageChange"
                :page-size.sync="pageData.pageSize"
                layout="prev, pager, next"
                :total="pageTotal"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import moment from "moment";
export default {
    props: {
        fields: Array,
        list: Array,
        columnClick: Function,
        pageTotal: Number
    },

    data() {
        return {
            moment,
            pageData: {
                pageNumber: 1,
                pageSize: 10
            }
        };
    },

    components: {},

    methods: {
        itemClick(row, item) {
            if (!item.isClick) return;
            this.$emit("columnClick", row);
        },
        pageChange(page) {
            this.$emit("pageChange", page);
        }
    },

    computed: {
        listArr() {
            return this.list;
        }
    }
};
</script>
<style lang="scss" scoped>
.table-box {
    .pagination {
        margin-top: 20px;
    }
}
.click-item {
    cursor: pointer;
    color: #45d0c5;
}
</style>
